*{padding:0;
  margin: 0;
}
.game{
	position:fixed;
	width: 100%;
	height:100%;
	background-image:url('./img/bg.jpg');
	background-size:100% 100% ;
	background-repeat:no-repeat;
	
}
 .button{
	position:absolute;
	width:150px;
	height:50px;
	top:50%;
	left:50%;
	font-weight:bold;
	font-size:24px;
	line-height:50px;
	text-align:center;
     transform:translate(-50%,-50%);
     background-color:#b0e8f1;
     color:#fff;
     border-radius:15px;
     border:1px solid #d8ecec;
     cursor:pointer;
}
 .button:hover{
 	border:2px solid #d8ecec;
 }
.game .letter-container{
	position:absolute;
    height: 100%;
    width: 70%;
    left:0;
}
.letter-container .letter{
	position:absolute;
	width:100px;
	height:100px;
}
.game .board{
	position:absolute;
	width:300px;
	height:360px;
	background-image:url("./img/board.png") ;
	background-size:100% 100%;
	right:20px;
	bottom:30px;

}
.game .board .gradeboard{
    position: absolute;
    right:90px;
    bottom:190px;
    font-size: 1.2em;
    font-weight: bold;
    

}
.gradeboard p{
	line-height:40px;

}
.game .over{
	position:absolute;
	width: 100%;
	height: 100%;
	background:#0008;
	color:#fff;
	display:none;

}
.over p{
	top:50%;
	left:50%;
	font-size:3em;
	position:absolute;
     transform:translate(-50%,-50%);

}
.over .rebirth{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,100%);
	font-size:1.5em;
	color:#fff;
	width:150px;
	height:50px;
	border:1px solid  #d8ecec;
	background:rgba(0,0,0,0.2);
	line-height: 50px;
	text-align:center;
	border-radius:50px;

}
.over .rebirth:hover{
	border:1.5px solid  #d8ecec;
}
.degree{
	height:30px;
	width:150px;
	position:absolute;
	text-align:center;
	top:50%;
	left:50%;
    margin-left:-75px;
    margin-top:50px;
	border:1px solid #d8ecec;
	border-radius:50% 50% 0 0;
	background:#b0efff;
   color:#fff;
    cursor:pointer;

    

}
.degree p{
      line-height:30px;
      font-size:20px;
}
.degree ul{
	display:block;
	list-style:none;
	text-align:left;
     perspective:800px;
     transition: all .8s; 


}
.degree ul .di{
border:1px solid white;	
width:138px;
height:25px;
padding-left:10px;
line-height:25px;
background:#b0efff;
transform:rotateY(90deg);
transition:all .8s cubic-bezier(0.075,0.82,.165,1);
cursor:pointer;
}

.degree ul .di .click{
	
	display:none;
	position:absolute;
	width:20px;
	height:20px;
	background-image: url(./img/letter/G.png);
	background-size:100% 100%;
	right:10px;
	top:0px;
}
.degree ul:hover .di{

	    transform:rotateY(0deg); 

}
.degree ul .di:hover{
	background:#b0e8f1;
}
.degree ul .di:nth-child(1){
	transition-delay:0ms;
}
.degree ul .di:nth-child(2){
	transition-delay:100ms;
}
.degree ul .di:nth-child(3){
	transition-delay:200ms;
}